<template>
  <div class="facility-detail"  :style="'height:' + height + 'px;'">
	<HeadTop :title="headTitle"></HeadTop>
    <div class="facility-search">
      <img class="facility-search-icon" src="../../../assets/search.png" />
      <input placeholder="搜索设备"  v-model="keyword" @keyup.enter="getNewData()"/>
    </div>
    <div class="facility-list">
        <FacilityList  :pageSize="pageSize" :pageCount="pageCount" :msg="msg"  v-on:pageChange="pageChange" v-on:ref="getNewData"></FacilityList>
    </div>
    <FootTab></FootTab>
  </div>
</template>

<script>
import { getEquipmentList } from '../../../api/index.js'
import FootTab from '../../../components/footTab.vue'
import { getYYYYMMDD } from '../../../api/unit.js'
import HeadTop from '../../../components/headTop.vue'
import FacilityList from './components/facilityList.vue'
export default {
  data () {
    return {
      headTitle: '水泵',
      height: document.documentElement.clientHeight,
      checked: true,
      msg: [],
      equmientTypeId: '',
      page: 1,
      pageSize: 5,
      pageCount: 0,
      keyword: ''
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTimes
    }
  },
  methods: {
    getNewData () {
      this.msg = []
      this.page = 1
      this.getData()
    },
    async getData () {
      let result = await getEquipmentList(this.page, this.pageSize, this.$route.query.id, this.keyword)
      let msg = this.msg
      result.data.result.map(v => {
        v.equipmentState = v.equipmentState === 0
        v.scrap = v.scrap === 0 ? '正常' : '作废'
        msg.push(v)
      })
      this.msg = msg
      this.pageCount = result.data.page.pageCount
    },
    getDetail () {
      this.$router.push({path: '/facility/detail'})
    },
    pageChange () {
      this.page = ++this.page
      this.getData()
    }
  },

  mounted () {
    this.getData()
    this.headTitle = this.$route.query.name
  },
  components: {
    FootTab,
    HeadTop,
    FacilityList
  }
}
</script>

<style scoped>
.facility-detail{
  background: #EDEAED;
    overflow: scroll;

}
.facility-search{
  background: #fff;
  width: 690px;
  height: 75px;
  display: flex;
  align-items: center;
  font-size: 28px;
  border-radius:10px;
  margin-top: 20px;
  margin-left: 30px;
}
.facility-search-icon{
  width: 31px;
  height: 31px;
  margin-left: 19px;
  margin-right: 24px;
}
.facility-list{
  background: #EBEBEB;
  width: 690px;
  margin-left: 30px;
}

</style>
